<template>
  <div class="c-pb48 c-bg-sgray">
    <div class="c-bg-white c-flex-row c-aligni-center c-ph24 c-pv20 c-bgTittle">
      <div class="iconfont c-fs20 theme-fc c-mr8">&#xe963;</div>
      <div class="c-fs20 theme-fc">之前的旧测评错题数据在这展示，外层考试错题入口将会集成测评、训练营这些入口的错题数据</div>
    </div>
    <div class="c-ph24 c-pv20">
      <div @click="clickGoRevise(item, tabIndex, 1)" class="c-flex-row c-aligni-center c-mb20 c-bg-white c-br10 c-ph20" v-for="(item,index) in wrongList" :key="index">
        <div class="c-flex-column c-flex-grow1">
          <div class="c-flex-row c-aligni-start c-pt30">
            <span :class="tabIndex==2 ? 'c-pl10' : ''" class="c-fs26 c-flex-grow1 c-w0">{{item.name}}</span>
          </div>
          <div class="c-flex-row c-aligni-center c-fs22 c-pb24 c-pt8 c-fc-sblack">
            <span class="c-flex-grow1 c-w0">共{{item.questionNum}}题错题去订正</span>
          </div>
        </div>
        <div>
          <i class="iconfont c-fs28 theme-fc">&#xe627;</i>
        </div>
      </div>
      <loading-status-tem :dataStatus="dataStatus" noDataText="暂无错题"></loading-status-tem>
    </div>
  </div>
</template>

<script>
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import {utilJs} from "@/utils/common.js";
let pageIndex = 1;
let LIMIT = 10;
export default {
  name: "List",
  components: {
    loadingStatusTem,
  },
  props: [],
  data() {
    return {
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      theme: localStorage.getItem("colorName") || "mb5_default",
      themeName: localStorage.getItem('themeName') ? localStorage.getItem('themeName') : 'mb5',
      dataStatus: 'HAS_MORE_DATA',
      wrongList: [],
    };
  },
  computed: {
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    //前去订正
    clickGoRevise(wItem, tabIndex, level) {
      this.$routerGo(this, "push", {
        path: "/member/myWrongTopic/examWrongTopic/examinationWrongEntry",
        query: {
          topicName: wItem.name,
          topicId: wItem.topicId,
          continueNum: wItem.continueNum,
          examMainId: wItem.examMainId,
          isTest: wItem.isTest,
          questionNum: wItem.questionNum,
          paperId:wItem.paperMainId
        }
      });
    },
    //获取我的测评错题集
    getExamWrongList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}exam/collection?page=${pageIndex}`, res => {
        if (pageIndex == 1) {
          this.wrongList = res.data;
        } else {
          this.wrongList = [...this.wrongList, ...res.data];
        }
        if (res.data && (res.data.length < LIMIT)) {
          this.dataStatus = pageIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex++;
        }
      },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "我的错题", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#" +
        this.$route.path +
        "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("我的错题", "", shareUrl, "");
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.wrongList.length > 0) {
            this.getExamWrongList();
        }
      });
    },
  },
  activated() {
    setDocumentTitle("我的错题");// eslint-disable-line
    this.wechatShare();
    this.getExamWrongList()
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.wrong-tip {
  border-radius: 0px 0.4rem 0rem 0.4rem;
  background-color: #f7bf75;
}
.c-bgTittle {
  background:rgba(111,134,255,0.06)
}
.tab-icon {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-right: 1.1rem;
  height: 0.15rem;
  width: 0.8rem;
  border-radius: 3px;
}
</style>
